<template>
  <div>
    <button @click="changeMsg">修改msg</button>
    {{ msg }}
    <h2 ref="h2">你好世界</h2>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
export default {
  setup () {
    const msg = ref('你好世界')
    /*
      ref传入初始值
      自动 包装一个对象 {value: '初始值'}
      并使用 proxy 代理
      返回msg 其实是 代理对象
    */
    const changeMsg = () => {
      msg.value = '值修改了'
    }
    const h2 = ref(null)

    onMounted(() => {
      console.log(h2.value)
    })
    return {
      msg,
      changeMsg,
      h2
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
